<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title> Forms Components | Nyasa - Responsive admin template </title>
        <link rel="shortcut icon" href="img/favicon.ico">
        <!--STYLESHEET-->
        <!--=================================================-->
        <!--Roboto Slab Font [ OPTIONAL ] -->
        <link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,300,100,700" rel="stylesheet">
        <link href="http://fonts.googleapis.com/css?family=Roboto:500,400italic,100,700italic,300,700,500italic,400" rel="stylesheet">
        <!--Bootstrap Stylesheet [ REQUIRED ]-->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <!--Jasmine Stylesheet [ REQUIRED ]-->
        <link href="css/style.css" rel="stylesheet">
        <!--Font Awesome [ OPTIONAL ]-->
        <link href="plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
        <!--Switchery [ OPTIONAL ]-->
        <link href="plugins/switchery/switchery.min.css" rel="stylesheet">
        <!--Bootstrap Select [ OPTIONAL ]-->
        <link href="plugins/bootstrap-select/bootstrap-select.min.css" rel="stylesheet">
        <!--Bootstrap Tags Input [ OPTIONAL ]-->
        <link href="plugins/bootstrap-tagsinput/bootstrap-tagsinput.css" rel="stylesheet">
        <!--Jquery Tag It [ OPTIONAL ]-->
        <link href="plugins/tag-it/jquery.tagit.css" rel="stylesheet">
        <!--Ion.RangeSlider [ OPTIONAL ]-->
        <link href="plugins/ion-rangeslider/ion.rangeSlider.css" rel="stylesheet">
        <link href="plugins/ion-rangeslider/ion.rangeSlider.skinNice.css" rel="stylesheet">
        <!--Chosen [ OPTIONAL ]-->
        <link href="plugins/chosen/chosen.min.css" rel="stylesheet">
        <!--noUiSlider [ OPTIONAL ]-->
        <link href="plugins/noUiSlider/jquery.nouislider.min.css" rel="stylesheet">
        <link href="plugins/noUiSlider/jquery.nouislider.pips.min.css" rel="stylesheet">
        <!--Bootstrap Timepicker [ OPTIONAL ]-->
        <link href="plugins/bootstrap-timepicker/bootstrap-timepicker.min.css" rel="stylesheet">
        <!--Bootstrap Datepicker [ OPTIONAL ]-->
        <link href="plugins/bootstrap-datepicker/bootstrap-datepicker.css" rel="stylesheet">
        <!--Dropzone [ OPTIONAL ]-->
        <link href="plugins/dropzone/dropzone.css" rel="stylesheet">
        <!--Summernote [ OPTIONAL ]-->
        <link href="plugins/summernote/summernote.min.css" rel="stylesheet">
        <!--Demo [ DEMONSTRATION ]-->
        <link href="css/demo/jasmine.css" rel="stylesheet">
        <!--SCRIPT-->
        <!--=================================================-->
        <!--Page Load Progress Bar [ OPTIONAL ]-->
        <link href="plugins/pace/pace.min.css" rel="stylesheet">
        <script src="plugins/pace/pace.min.js"></script>
    </head>
    <body>
        <div id="container" class="effect mainnav-lg navbar-fixed mainnav-fixed">
            <!--NAVBAR-->
            <!--===================================================-->
            <header id="navbar">
                <div id="navbar-container" class="boxed">
                    <!--Brand logo & name-->
                    <!--================================-->
                    <div class="navbar-header">
                        <a href="index.html" class="navbar-brand">
                            <i class="fa fa-cube brand-icon"></i>
                            <div class="brand-title">
                                <span class="brand-text">Nyasa</span>
                            </div>
                        </a>
                    </div>
                    <!--================================-->
                    <!--End brand logo & name-->
                    <!--Navbar Dropdown-->
                    <!--================================-->
                    <div class="navbar-content clearfix">
                        <ul class="nav navbar-top-links pull-left">
                            <!--Navigation toogle button-->
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <li class="tgl-menu-btn">
                                <a class="mainnav-toggle" href="forms-components.html#"> <i class="fa fa-navicon fa-lg"></i> </a>
                            </li>
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <!--End Navigation toogle button-->
                            <!--Profile toogle button-->
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <li id="profilebtn" class="hidden-xs">
                                <a href="JavaScript:void(0);"> <i class="fa fa-user fa-lg"></i> </a>
                            </li>
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <!--End Profile toogle button-->
                            <!--Messages Dropdown-->
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <li class="dropdown">
                                <a href="forms-components.html#" data-toggle="dropdown" class="dropdown-toggle"> <i class="fa fa-envelope fa-lg"></i> <span class="badge badge-header badge-warning">9</span> 
                                </a>
                                <!--Message dropdown menu-->
                                <div class="dropdown-menu dropdown-menu-md with-arrow">
                                    <div class="pad-all bord-btm">
                                        <div class="h4 text-muted text-thin mar-no">You have 3 messages.</div>
                                    </div>
                                    <div class="nano scrollable">
                                        <div class="nano-content">
                                            <ul class="head-list">
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="forms-components.html#" class="media">
                                                        <div class="media-left"> <img src="img/av2.png" alt="Profile Picture" class="img-circle img-sm"> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">Andy sent you a message</div>
                                                            <small class="text-muted">15 minutes ago</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="forms-components.html#" class="media">
                                                        <div class="media-left"> <img src="img/av4.png" alt="Profile Picture" class="img-circle img-sm"> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">Lucy sent you a message</div>
                                                            <small class="text-muted">30 minutes ago</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="forms-components.html#" class="media">
                                                        <div class="media-left"> <img src="img/av3.png" alt="Profile Picture" class="img-circle img-sm"> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">Jackson sent you a message</div>
                                                            <small class="text-muted">40 minutes ago</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="forms-components.html#" class="media">
                                                        <div class="media-left"> <img src="img/av6.png" alt="Profile Picture" class="img-circle img-sm"> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">Donna sent you a message</div>
                                                            <small class="text-muted">5 hours ago</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="forms-components.html#" class="media">
                                                        <div class="media-left"> <img src="img/av4.png" alt="Profile Picture" class="img-circle img-sm"> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">Lucy sent you a message</div>
                                                            <small class="text-muted">Yesterday</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="forms-components.html#" class="media">
                                                        <div class="media-left"> <img src="img/av3.png" alt="Profile Picture" class="img-circle img-sm"> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">Jackson sent you a message</div>
                                                            <small class="text-muted">Yesterday</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <!--Dropdown footer-->
                                    <div class="pad-all bord-top">
                                        <a href="forms-components.html#" class="btn-link text-dark box-block"> <i class="fa fa-angle-right fa-lg pull-right"></i>Show All Messages </a>
                                    </div>
                                </div>
                            </li>
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <!--End message dropdown-->
                            <!--Notification dropdown-->
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <li class="dropdown">
                                <a href="forms-components.html#" data-toggle="dropdown" class="dropdown-toggle"> <i class="fa fa-bell fa-lg"></i> <span class="badge badge-header badge-danger">5</span> </a>
                                <!--Notification dropdown menu-->
                                <div class="dropdown-menu dropdown-menu-md with-arrow">
                                    <div class="pad-all bord-btm">
                                        <div class="h4 text-muted text-thin mar-no"> Notification </div>
                                    </div>
                                    <div class="nano scrollable">
                                        <div class="nano-content">
                                            <ul class="head-list">
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="forms-components.html#" class="media">
                                                        <div class="media-left"> <span class="icon-wrap icon-circle bg-primary"> <i class="fa fa-comment fa-lg"></i> </span> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">New comments waiting approval</div>
                                                            <small class="text-muted">15 minutes ago</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="forms-components.html#" class="media">
                                                        <span class="badge badge-success pull-right">90%</span>
                                                        <div class="media-left"> <span class="icon-wrap icon-circle bg-danger"> <i class="fa fa-hdd-o fa-lg"></i> </span> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">HDD is full</div>
                                                            <small class="text-muted">50 minutes ago</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="forms-components.html#" class="media">
                                                        <div class="media-left"> <span class="icon-wrap icon-circle bg-info"> <i class="fa fa-file-word-o fa-lg"></i> </span> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">Write a news article</div>
                                                            <small class="text-muted">Last Update 8 hours ago</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="forms-components.html#" class="media">
                                                        <span class="label label-danger pull-right">New</span>
                                                        <div class="media-left"> <span class="icon-wrap icon-circle bg-purple"> <i class="fa fa-comment fa-lg"></i> </span> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">Comment Sorting</div>
                                                            <small class="text-muted">Last Update 8 hours ago</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="forms-components.html#" class="media">
                                                        <div class="media-left"> <span class="icon-wrap icon-circle bg-success"> <i class="fa fa-user fa-lg"></i> </span> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">New User Registered</div>
                                                            <small class="text-muted">4 minutes ago</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <!--Dropdown footer-->
                                    <div class="pad-all bord-top">
                                        <a href="forms-components.html#" class="btn-link text-dark box-block"> <i class="fa fa-angle-right fa-lg pull-right"></i>Show All Notifications </a>
                                    </div>
                                </div>
                            </li>
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <!--End notifications dropdown-->
                        </ul>
                        <ul class="nav navbar-top-links pull-right">
                            <!--Profile toogle button-->
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <li class="hidden-xs" id="toggleFullscreen">
                                <a class="fa fa-expand" data-toggle="fullscreen" href="forms-components.html#" role="button">
                                <span class="sr-only">Toggle fullscreen</span>
                                </a>
                            </li>
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <!--End Profile toogle button-->
                            <!--User dropdown-->
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <li id="dropdown-user" class="dropdown">
                                <a href="forms-components.html#" data-toggle="dropdown" class="dropdown-toggle text-right">
                                    <span class="pull-right"> <img class="img-circle img-user media-object" src="img/av1.png" alt="Profile Picture"> </span>
                                    <div class="username hidden-xs">John Doe</div>
                                </a>
                                <div class="dropdown-menu dropdown-menu-right with-arrow">
                                    <!-- User dropdown menu -->
                                    <ul class="head-list">
                                        <li>
                                            <a href="forms-components.html#"> <i class="fa fa-user fa-fw"></i> Profile </a>
                                        </li>
                                        <li>
                                            <a href="forms-components.html#">  <i class="fa fa-envelope fa-fw"></i> Messages </a>
                                        </li>
                                        <li>
                                            <a href="forms-components.html#">  <i class="fa fa-gear fa-fw"></i> Settings </a>
                                        </li>
                                        <li>
                                            <a href="forms-components.html#"> <i class="fa fa-sign-out fa-fw"></i> Logout </a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <!--End user dropdown-->
                            <!--Navigation toogle button-->
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <li class="hidden-xs">
                                <a id="demo-toggle-aside" href="forms-components.html#">
                                <i class="fa fa-navicon fa-lg"></i>
                                </a>
                            </li>
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <!--End Navigation toogle button-->
                        </ul>
                    </div>
                    <!--================================-->
                    <!--End Navbar Dropdown-->
                </div>
            </header>
            <!--===================================================-->
            <!--END NAVBAR-->
            <div class="boxed">
                <!--CONTENT CONTAINER-->
                <!--===================================================-->
                <section id="content-container">
                    <div id="profilebody">
                        <div class="pad-all animated fadeInDown">
                            <div class="row">
                                <div class="col-lg-2 col-sm-6 col-md-6 col-xs-12">
                                    <div class="panel panel-default mar-no">
                                        <div class="panel-body">
                                            <a href="JavaScript:void(0);">
                                                <div class="pull-left">
                                                    <p class="profile-title text-bricky">Users</p>
                                                </div>
                                                <div class="pull-right text-bricky"> <i class="fa fa-users fa-4x"></i> </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-2 col-sm-6 col-md-6 col-xs-12">
                                    <div class="panel panel-default mar-no">
                                        <div class="panel-body">
                                            <a href="JavaScript:void(0);">
                                                <div class="pull-left">
                                                    <p class="profile-title text-bricky">Inbox</p>
                                                </div>
                                                <div class="pull-right text-bricky"> <i class="fa fa-envelope fa-4x"></i> </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-2 col-sm-6 col-md-6 col-xs-12">
                                    <div class="panel panel-default mar-no">
                                        <div class="panel-body">
                                            <a href="JavaScript:void(0);">
                                                <div class="pull-left">
                                                    <p class="profile-title text-bricky">FAQ</p>
                                                </div>
                                                <div class="pull-right text-bricky"> <i class="fa fa-headphones fa-4x"></i> </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-2 col-sm-6 col-md-6 col-xs-12">
                                    <div class="panel panel-default mar-no">
                                        <div class="panel-body">
                                            <a href="JavaScript:void(0);">
                                                <div class="pull-left">
                                                    <p class="profile-title text-bricky">Settings</p>
                                                </div>
                                                <div class="pull-right text-bricky"> <i class="fa fa-cogs fa-4x"></i> </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-2 col-sm-6 col-md-6 col-xs-12">
                                    <div class="panel panel-default mar-no">
                                        <div class="panel-body">
                                            <a href="JavaScript:void(0);">
                                                <div class="pull-left">
                                                    <p class="profile-title text-bricky">Calender</p>
                                                </div>
                                                <div class="pull-right text-bricky"> <i class="fa fa-calendar fa-4x"></i> </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-2 col-sm-6 col-md-6 col-xs-12">
                                    <div class="panel panel-default mar-no">
                                        <div class="panel-body">
                                            <a href="JavaScript:void(0);">
                                                <div class="pull-left">
                                                    <p class="profile-title text-bricky">Pictures</p>
                                                </div>
                                                <div class="pull-right text-bricky"> <i class="fa fa-picture-o fa-4x"></i> </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <header class="pageheader">
                        <h3><i class="fa fa-home"></i> Form Components </h3>
                        <div class="breadcrumb-wrapper">
                            <span class="label">You are here:</span>
                            <ol class="breadcrumb">
                                <li> <a href="forms-components.html#"> Home </a> </li>
                                <li class="active"> form components </li>
                            </ol>
                        </div>
                    </header>
                    <!--Page content-->
                    <!--===================================================-->
                    <section id="page-content">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <div class="panel-control">
                                            <button class="btn btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></button>
                                            <button class="btn btn-default" data-click="panel-reload"><i class="fa fa-refresh"></i></button>
                                            <button class="btn btn-default" data-click="panel-collapse"><i class="fa fa-chevron-down"></i></button>
                                            <button class="btn btn-default" data-dismiss="panel"><i class="fa fa-times"></i></button>
                                        </div>
                                        <h3 class="panel-title">Basic Form Elements</h3>
                                    </div>
                                    <!-- BASIC FORM ELEMENTS -->
                                    <!--===================================================-->
                                    <form class="panel-body form-horizontal">
                                        <!--Static-->
                                        <div class="form-group">
                                            <label class="col-md-3 control-label">Static</label>
                                            <div class="col-md-9">
                                                <p class="form-control-static">Username</p>
                                            </div>
                                        </div>
                                        <!--Text Input-->
                                        <div class="form-group">
                                            <label class="col-md-3 control-label" for="demo-text-input">Text Input</label>
                                            <div class="col-md-9">
                                                <input type="text" id="demo-text-input" class="form-control" placeholder="Text">
                                                <small class="help-block">This is a help text</small>
                                            </div>
                                        </div>
                                        <!--Email Input-->
                                        <div class="form-group">
                                            <label class="col-md-3 control-label" for="demo-email-input">Email Input</label>
                                            <div class="col-md-9">
                                                <input type="email" id="demo-email-input" class="form-control" placeholder="Enter your email">
                                                <small class="help-block">Please enter your email</small>
                                            </div>
                                        </div>
                                        <!--Password-->
                                        <div class="form-group">
                                            <label class="col-md-3 control-label" for="demo-password-input">Password</label>
                                            <div class="col-md-9">
                                                <input type="password" id="demo-password-input" class="form-control" placeholder="Password">
                                                <small class="help-block">Please enter password</small>
                                            </div>
                                        </div>
                                        <!--Readonly Input-->
                                        <div class="form-group">
                                            <label class="col-md-3 control-label" for="demo-readonly-input">Readonly input</label>
                                            <div class="col-md-9">
                                                <input type="text" id="demo-readonly-input" class="form-control" placeholder="Readonly input here..." readonly>
                                            </div>
                                        </div>
                                        <!--Textarea-->
                                        <div class="form-group">
                                            <label class="col-md-3 control-label" for="demo-textarea-input">Textarea</label>
                                            <div class="col-md-9">
                                                <textarea id="demo-textarea-input" rows="9" class="form-control" placeholder="Your content here.."></textarea>
                                            </div>
                                        </div>
                                        <div class="form-group pad-ver-5">
                                            <label class="col-md-3 control-label">Radio Buttons</label>
                                            <div class="col-md-9">
                                                <div class="col-md-6 pad-no">
                                                    <!-- Icon Radio Buttons -->
                                                    <div class="radio">
                                                        <label class="form-radio form-icon active">
                                                        <input type="radio" checked="" name="ico-blk"> Option 1 (pre-checked)</label>
                                                    </div>
                                                    <div class="radio">
                                                        <label class="form-radio form-icon">
                                                        <input type="radio" name="ico-blk"> Option 2</label>
                                                    </div>
                                                    <div class="radio">
                                                        <label class="form-radio form-icon">
                                                        <input type="radio" name="ico-blk"> Option 3</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group pad-ver-5">
                                            <label class="col-md-3 control-label">Inline Radio</label>
                                            <div class="col-md-9">
                                                <div class="radio">
                                                    <!-- Inline Icon Radios Buttons -->
                                                    <label class="form-radio form-icon active">
                                                    <input type="radio" checked="" name="ico-w-label"> Option 1 (pre-checked)</label>
                                                    <label class="form-radio form-icon">
                                                    <input type="radio" name="ico-w-label"> Option 2</label>
                                                    <label class="form-radio form-icon">
                                                    <input type="radio" name="ico-w-label"> Option 3</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group pad-ver-5">
                                            <label class="col-md-3 control-label">Inline Radio buttons</label>
                                            <div class="col-md-9">
                                                <div class="radio">
                                                    <!-- Inline Icon Radios Buttons -->
                                                    <!--===================================================-->
                                                    <label class="form-radio form-icon btn btn-default form-text">
                                                    <input type="radio" name="btn-ex-label" checked> Option 1
                                                    </label>
                                                    <label class="form-radio form-icon btn btn-default form-text">
                                                    <input type="radio" name="btn-ex-label"> Option 2
                                                    </label>                                                
                                                    <label class="form-radio form-icon btn btn-default form-text">
                                                    <input type="radio" name="btn-ex-label"> Option 3
                                                    </label>
                                                    <!--===================================================-->
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-md-3 control-label">Inline Radio (Colored)</label>
                                            <div class="col-md-9">
                                                <div class="radio">
                                                    <!-- Inline Icon Radios Buttons -->
                                                    <!--===================================================-->
                                                    <label class="form-radio form-icon btn btn-danger btn-labeled form-text active">
                                                    <input type="radio" name="btn-ex-label" checked> Option 1
                                                    </label>
                                                    <label class="form-radio form-icon btn btn-danger btn-labeled form-text">
                                                    <input type="radio" name="btn-ex-label"> Option 2
                                                    </label>                                                
                                                    <label class="form-radio form-icon btn btn-danger btn-labeled form-text">
                                                    <input type="radio" name="btn-ex-label"> Option 3
                                                    </label>
                                                    <!--===================================================-->
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-md-3 control-label">Checkboxes</label>
                                            <div class="col-md-9">
                                                <div class="col-md-6 pad-no form-block">
                                                    <!-- Icon Checkboxes -->
                                                    <div class="checkbox">
                                                        <label class="form-checkbox form-icon active">
                                                        <input type="checkbox" checked=""> Option 1 (pre-checked)</label>
                                                    </div>
                                                    <div class="checkbox">
                                                        <label class="form-checkbox form-icon">
                                                        <input type="checkbox"> Option 2</label>
                                                    </div>
                                                    <div class="checkbox">
                                                        <label class="form-checkbox form-icon">
                                                        <input type="checkbox"> Option 3</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-md-3 control-label">Inline Checkboxes</label>
                                            <div class="col-md-9">
                                                <div class="checkbox">
                                                    <!-- Inline Icon Checkboxes -->
                                                    <label class="form-checkbox form-icon active">
                                                    <input type="checkbox" checked=""> Option 1 (pre-checked)</label>
                                                    <label class="form-checkbox form-icon">
                                                    <input type="checkbox"> Option 2</label>
                                                    <label class="form-checkbox form-icon">
                                                    <input type="checkbox"> Option 3</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-md-3 control-label">Inline Checkbox Button</label>
                                            <div class="col-md-9">
                                                <div class="checkbox">
                                                    <!-- Inline Icon Checkboxes -->
                                                    <label class="form-checkbox form-icon btn btn-default active form-text">
                                                    <input type="checkbox" checked=""> Option 1</label>
                                                    <label class="form-checkbox form-icon btn btn-default form-text">
                                                    <input type="checkbox"> Option 2</label>
                                                    <label class="form-checkbox form-icon btn btn-default form-text">
                                                    <input type="checkbox"> Option 3</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-md-3 control-label">Inline Checkbox (Colored)</label>
                                            <div class="col-md-9">
                                                <div class="checkbox">
                                                    <!-- Inline Icon Checkboxes -->
                                                    <label class="form-checkbox form-icon btn btn-success btn-labeled active">
                                                    <input type="checkbox" checked=""> Option 1</label>
                                                    <label class="form-checkbox form-icon btn btn-success btn-labeled active">
                                                    <input type="checkbox"> Option 2</label>
                                                    <label class="form-checkbox form-icon btn btn-success btn-labeled active">
                                                    <input type="checkbox"> Option 3</label>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                    <!--===================================================-->
                                    <!-- END BASIC FORM ELEMENTS -->
                                </div>
                                <div class="panel">
                                    <div class="panel-heading">
                                        <div class="panel-control">
                                            <button class="btn btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></button>
                                            <button class="btn btn-default" data-click="panel-reload"><i class="fa fa-refresh"></i></button>
                                            <button class="btn btn-default" data-click="panel-collapse"><i class="fa fa-chevron-down"></i></button>
                                            <button class="btn btn-default" data-dismiss="panel"><i class="fa fa-times"></i></button>
                                        </div>
                                        <h3 class="panel-title">Checkboxes and radio addons</h3>
                                    </div>
                                    <!--Checkboxes and Radio addons-->
                                    <!--===================================================-->
                                    <form class="form-horizontal">
                                        <div class="panel-body">
                                            <div class="input-group mar-btm">
                                                <span class="input-group-addon">
                                                <label class="form-checkbox form-icon active">
                                                <input type="checkbox" checked>
                                                </label>
                                                </span>
                                                <input type="text" class="form-control">
                                            </div>
                                            <div class="input-group mar-btm">
                                                <span class="input-group-addon">
                                                <label class="form-radio form-icon">
                                                <input type="radio" name="input-group-radio">
                                                </label>
                                                </span>
                                                <input type="text" class="form-control">
                                            </div>
                                            <div class="input-group mar-btm">
                                                <span class="input-group-addon">
                                                <label class="form-radio form-icon">
                                                <input type="radio" name="input-group-radio">
                                                </label>
                                                </span>
                                                <input type="text" class="form-control">
                                            </div>
                                        </div>
                                    </form>
                                    <!--===================================================-->
                                    <!--End Checkboxes and Radio addons-->
                                </div>
                                <div class="panel">
                                    <div class="panel-heading">
                                        <div class="panel-control">
                                            <button class="btn btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></button>
                                            <button class="btn btn-default" data-click="panel-reload"><i class="fa fa-refresh"></i></button>
                                            <button class="btn btn-default" data-click="panel-collapse"><i class="fa fa-chevron-down"></i></button>
                                            <button class="btn btn-default" data-dismiss="panel"><i class="fa fa-times"></i></button>
                                        </div>
                                        <h3 class="panel-title">Dropdowns Addons</h3>
                                    </div>
                                    <!--Dropdowns Addons-->
                                    <!--===================================================-->
                                    <form class="form-horizontal">
                                        <div class="panel-body">
                                            <div class="input-group mar-btm">
                                                <div class="input-group-btn">
                                                    <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle" type="button">Action <i class="dropdown-caret fa fa-caret-down"></i>
                                                    </button>
                                                    <ul class="dropdown-menu">
                                                        <li><a href="forms-components.html#">Action</a></li>
                                                        <li><a href="forms-components.html#">Another action</a></li>
                                                        <li><a href="forms-components.html#">Something else here</a></li>
                                                        <li class="divider"></li>
                                                        <li><a href="forms-components.html#">Separated link</a></li>
                                                    </ul>
                                                </div>
                                                <input type="text" placeholder="Username" class="form-control">
                                            </div>
                                            <div class="input-group mar-btm">
                                                <input type="email" placeholder="Email" class="form-control">
                                                <div class="input-group-btn">
                                                    <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle" type="button">Action <i class="dropdown-caret fa fa-caret-down"></i>
                                                    </button>
                                                    <ul class="dropdown-menu dropdown-menu-right">
                                                        <li><a href="forms-components.html#">Action</a></li>
                                                        <li><a href="forms-components.html#">Another action</a></li>
                                                        <li><a href="forms-components.html#">Something else here</a></li>
                                                        <li class="divider"></li>
                                                        <li><a href="forms-components.html#">Separated link</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="input-group mar-btm">
                                                <div class="input-group-btn">
                                                    <button class="btn btn-primary" type="button">Action</button>
                                                    <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle dropdown-toggle-icon" type="button"><i class="dropdown-caret fa fa-caret-down"></i>
                                                    </button>
                                                    <ul class="dropdown-menu">
                                                        <li><a href="forms-components.html#">Action</a></li>
                                                        <li><a href="forms-components.html#">Another action</a></li>
                                                        <li><a href="forms-components.html#">Something else here</a></li>
                                                        <li class="divider"></li>
                                                        <li><a href="forms-components.html#">Separated link</a></li>
                                                    </ul>
                                                </div>
                                                <input type="text" placeholder="Comment" class="form-control">
                                                <div class="input-group-btn">
                                                    <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle dropdown-toggle-icon" type="button"><i class="dropdown-caret fa fa-caret-down"></i>
                                                    </button>
                                                    <ul class="dropdown-menu dropdown-menu-right">
                                                        <li><a href="forms-components.html#">Action</a></li>
                                                        <li><a href="forms-components.html#">Another action</a></li>
                                                        <li><a href="forms-components.html#">Something else here</a></li>
                                                        <li class="divider"></li>
                                                        <li><a href="forms-components.html#">Separated link</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                    <!--===================================================-->
                                    <!--End Dropdowns Addons-->
                                </div>
                                <div class="panel">
                                    <div class="panel-heading">
                                        <div class="panel-control">
                                            <button class="btn btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></button>
                                            <button class="btn btn-default" data-click="panel-reload"><i class="fa fa-refresh"></i></button>
                                            <button class="btn btn-default" data-click="panel-collapse"><i class="fa fa-chevron-down"></i></button>
                                            <button class="btn btn-default" data-dismiss="panel"><i class="fa fa-times"></i></button>
                                        </div>
                                        <h3 class="panel-title">Bootstrap Tags Input</h3>
                                    </div>
                                    <div class="panel-body">
                                        <p>jQuery plugin providing a Twitter Bootstrap user interface for managing tags</p>
                                        <form class="form-horizontal form-bordered">
                                            <div class="form-group">
                                                <label class="control-label col-md-4">Default Tags Input with Autocomplete</label>
                                                <div class="col-md-8">
                                                    <ul id="jquery-tagIt-default">
                                                        <li>Tag1</li>
                                                        <li>Tag2</li>
                                                        <li>Tag3</li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label col-md-4">Inverse Theme</label>
                                                <div class="col-md-8">
                                                    <ul id="jquery-tagIt-inverse" class="inverse">
                                                        <li>Tag1</li>
                                                        <li>Tag2</li>
                                                        <li>Tag3</li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label col-md-4">White Theme</label>
                                                <div class="col-md-8">
                                                    <ul id="jquery-tagIt-white" class="white">
                                                        <li>Tag1</li>
                                                        <li>Tag2</li>
                                                        <li>Tag3</li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label col-md-4">Primary Theme</label>
                                                <div class="col-md-8">
                                                    <ul id="jquery-tagIt-primary" class="primary">
                                                        <li>Tag1</li>
                                                        <li>Tag2</li>
                                                        <li>Tag3</li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label col-md-4">Info Theme</label>
                                                <div class="col-md-8">
                                                    <ul id="jquery-tagIt-info" class="info">
                                                        <li>Tag1</li>
                                                        <li>Tag2</li>
                                                        <li>Tag3</li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label col-md-4">Success Theme</label>
                                                <div class="col-md-8">
                                                    <ul id="jquery-tagIt-success" class="success">
                                                        <li>Tag1</li>
                                                        <li>Tag2</li>
                                                        <li>Tag3</li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label col-md-4">Warning Theme</label>
                                                <div class="col-md-8">
                                                    <ul id="jquery-tagIt-warning" class="warning">
                                                        <li>Tag1</li>
                                                        <li>Tag2</li>
                                                        <li>Tag3</li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label col-md-4">Danger Theme</label>
                                                <div class="col-md-8">
                                                    <ul id="jquery-tagIt-danger" class="danger">
                                                        <li>Tag1</li>
                                                        <li>Tag2</li>
                                                        <li>Tag3</li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                <div class="panel">
                                    <div class="panel-heading">
                                        <div class="panel-control">
                                            <button class="btn btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></button>
                                            <button class="btn btn-default" data-click="panel-reload"><i class="fa fa-refresh"></i></button>
                                            <button class="btn btn-default" data-click="panel-collapse"><i class="fa fa-chevron-down"></i></button>
                                            <button class="btn btn-default" data-dismiss="panel"><i class="fa fa-times"></i></button>
                                        </div>
                                        <h3 class="panel-title">Chosen</h3>
                                    </div>
                                    <div class="panel-body">
                                        <p>Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly.</p>
                                        <form class="form-horizontal form-bordered">
                                            <div class="form-group">
                                                <label class="control-label col-md-4">Default Bootstrap Chosen </label>
                                                <div class="col-md-8">
                                                    <!-- Default choosen -->
                                                    <!--===================================================-->
                                                    <select data-placeholder="Choose a Country..." class="demo-chosen-select">
                                                        <option value="United States">United States</option>
                                                        <option value="United Kingdom">United Kingdom</option>
                                                        <option value="Afghanistan">Afghanistan</option>
                                                        <option value="Aland Islands">Aland Islands</option>
                                                        <option value="Albania">Albania</option>
                                                        <option value="Algeria">Algeria</option>
                                                        <option value="American Samoa">American Samoa</option>
                                                        <option value="Andorra">Andorra</option>
                                                        <option value="Angola">Angola</option>
                                                        <option value="Anguilla">Anguilla</option>
                                                        <option value="Antarctica">Antarctica</option>
                                                        <option value="Antigua and Barbuda">Antigua and Barbuda</option>
                                                        <option value="Bolivia, Plurinational State of">Bolivia, Plurinational State of</option>
                                                        <option value="Bonaire, Sint Eustatius and Saba">Bonaire, Sint Eustatius and Saba</option>
                                                        <option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
                                                        <option value="Congo, The Democratic Republic of The">Congo, The Democratic Republic of The</option>
                                                        <option value="Iran, Islamic Republic of">Iran, Islamic Republic of</option>
                                                        <option value="French Polynesia">French Polynesia</option>
                                                        <option value="Heard Island and Mcdonald Islands">Heard Island and Mcdonald Islands</option>
                                                        <option value="Holy See (Vatican City State)">Holy See (Vatican City State)</option>
                                                        <option value="Honduras">Honduras</option>
                                                        <option value="Hong Kong">Hong Kong</option>
                                                    </select>
                                                    <!--===================================================-->
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label col-md-4"> Multiple Select </label>
                                                <div class="col-md-8">
                                                    <!-- Default choosen -->
                                                    <!--===================================================-->
                                                    <select class="demo-cs-multiselect" data-placeholder="Choose a Country..." multiple tabindex="4">
                                                        <option value="United States">United States</option>
                                                        <option value="United Kingdom">United Kingdom</option>
                                                        <option value="Afghanistan">Afghanistan</option>
                                                        <option value="Aland Islands">Aland Islands</option>
                                                        <option value="Albania">Albania</option>
                                                        <option value="Algeria">Algeria</option>
                                                        <option value="American Samoa">American Samoa</option>
                                                        <option value="Andorra">Andorra</option>
                                                        <option value="Angola">Angola</option>
                                                        <option value="Anguilla">Anguilla</option>
                                                        <option value="Antarctica">Antarctica</option>
                                                        <option value="Antigua and Barbuda">Antigua and Barbuda</option>
                                                        <option value="Bolivia, Plurinational State of">Bolivia, Plurinational State of</option>
                                                        <option value="Bonaire, Sint Eustatius and Saba">Bonaire, Sint Eustatius and Saba</option>
                                                        <option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
                                                        <option value="Congo, The Democratic Republic of The">Congo, The Democratic Republic of The</option>
                                                        <option value="Iran, Islamic Republic of">Iran, Islamic Republic of</option>
                                                        <option value="French Polynesia">French Polynesia</option>
                                                        <option value="Heard Island and Mcdonald Islands">Heard Island and Mcdonald Islands</option>
                                                        <option value="Holy See (Vatican City State)">Holy See (Vatican City State)</option>
                                                        <option value="Honduras">Honduras</option>
                                                        <option value="Hong Kong">Hong Kong</option>
                                                    </select>
                                                    <!--===================================================-->
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                <div class="panel">
                                    <div class="panel-heading">
                                        <div class="panel-control">
                                            <button class="btn btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></button>
                                            <button class="btn btn-default" data-click="panel-reload"><i class="fa fa-refresh"></i></button>
                                            <button class="btn btn-default" data-click="panel-collapse"><i class="fa fa-chevron-down"></i></button>
                                            <button class="btn btn-default" data-dismiss="panel"><i class="fa fa-times"></i></button>
                                        </div>
                                        <h3 class="panel-title">Bootstrap Select</h3>
                                    </div>
                                    <div class="panel-body">
                                        <p>A custom select for Twitter Bootstrap using button dropdown.</p>
                                        <form class="form-horizontal form-bordered">
                                            <div class="form-group">
                                                <label class="control-label col-md-4"> Default Botstrap Select </label>
                                                <div class="col-md-8">
                                                    <!-- Default Bootstrap Select -->
                                                    <!--===================================================-->
                                                    <select class="form-control selectpicker">
                                                        <option>HTML</option>
                                                        <option>CSS</option>
                                                        <option>jQuery</option>
                                                        <option>Javascript</option>
                                                    </select>
                                                    <!--===================================================-->
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label col-md-4"> Group </label>
                                                <div class="col-md-8">
                                                    <!-- Default Bootstrap Group -->
                                                    <!--===================================================-->
                                                    <select class="form-control selectpicker">
                                                        <optgroup label="Skills">
                                                            <option>HTML</option>
                                                            <option>CSS</option>
                                                            <option>jQuery</option>
                                                            <option>Javascript</option>
                                                        </optgroup>
                                                        <optgroup label="Music">
                                                            <option>Pop</option>
                                                            <option>Rap</option>
                                                            <option>Rock</option>
                                                            <option>Soundtrack</option>
                                                        </optgroup>
                                                    </select>
                                                    <!--===================================================-->
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label col-md-4"> Multiple selects </label>
                                                <div class="col-md-8">
                                                    <!-- Bootstrap Select with Multiple Selects -->
                                                    <!--===================================================-->
                                                    <select class="form-control selectpicker" multiple title="Choose one of the following...">
                                                        <option>HTML</option>
                                                        <option>CSS</option>
                                                        <option>jQuery</option>
                                                        <option>Javascript</option>
                                                    </select>
                                                    <!--===================================================-->
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label col-md-4"> Add a search input </label>
                                                <div class="col-md-8">
                                                    <!-- Bootstrap Select with Search Input -->
                                                    <!--===================================================-->
                                                    <select class="form-control selectpicker" data-live-search="true">
                                                        <option>HTML</option>
                                                        <option>CSS</option>
                                                        <option>jQuery</option>
                                                        <option>Javascript</option>
                                                    </select>
                                                    <!--===================================================-->
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label col-md-4"> Primary Theme </label>
                                                <div class="col-md-8">
                                                    <!-- Bootstrap Select : primary -->
                                                    <!--===================================================-->
                                                    <select class="form-control selectpicker" data-style="btn-primary">
                                                        <option>HTML</option>
                                                        <option>CSS</option>
                                                        <option>jQuery</option>
                                                        <option>Javascript</option>
                                                    </select>
                                                    <!--===================================================-->
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label col-md-4"> Info Theme </label>
                                                <div class="col-md-8">
                                                    <!-- Bootstrap Select : Info -->
                                                    <!--===================================================-->
                                                    <select class="form-control selectpicker" data-style="btn-info">
                                                        <option>HTML</option>
                                                        <option>CSS</option>
                                                        <option>jQuery</option>
                                                        <option>Javascript</option>
                                                    </select>
                                                    <!--===================================================-->
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label col-md-4"> Success Theme </label>
                                                <div class="col-md-8">
                                                    <!-- Bootstrap Select : Success -->
                                                    <!--===================================================-->
                                                    <select class="form-control selectpicker" data-style="btn-success">
                                                        <option>HTML</option>
                                                        <option>CSS</option>
                                                        <option>jQuery</option>
                                                        <option>Javascript</option>
                                                    </select>
                                                    <!--===================================================-->
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label col-md-4"> Danger Theme </label>
                                                <div class="col-md-8">
                                                    <!-- Bootstrap Select : Danger -->
                                                    <!--===================================================-->
                                                    <select class="form-control selectpicker" data-style="btn-danger">
                                                        <option>HTML</option>
                                                        <option>CSS</option>
                                                        <option>jQuery</option>
                                                        <option>Javascript</option>
                                                    </select>
                                                    <!--===================================================-->
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label col-md-4"> Purple Theme </label>
                                                <div class="col-md-8">
                                                    <!-- Bootstrap Select : Purple -->
                                                    <!--===================================================-->
                                                    <select class="form-control selectpicker" data-style="btn-purple">
                                                        <option>HTML</option>
                                                        <option>CSS</option>
                                                        <option>jQuery</option>
                                                        <option>Javascript</option>
                                                    </select>
                                                    <!--===================================================-->
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label col-md-4"> Warning Theme </label>
                                                <div class="col-md-8">
                                                    <!-- Bootstrap Select : Warning -->
                                                    <!--===================================================-->
                                                    <select class="form-control selectpicker" data-style="btn-warning">
                                                        <option>HTML</option>
                                                        <option>CSS</option>
                                                        <option>jQuery</option>
                                                        <option>Javascript</option>
                                                    </select>
                                                    <!--===================================================-->
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label col-md-4"> Mint Theme </label>
                                                <div class="col-md-8">
                                                    <!-- Bootstrap Select : Mint -->
                                                    <!--===================================================-->
                                                    <select class="form-control selectpicker" data-style="btn-mint">
                                                        <option>HTML</option>
                                                        <option>CSS</option>
                                                        <option>jQuery</option>
                                                        <option>Javascript</option>
                                                    </select>
                                                    <!--===================================================-->
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label col-md-4"> Pink Theme </label>
                                                <div class="col-md-8">
                                                    <!-- Bootstrap Select : Pink -->
                                                    <!--===================================================-->
                                                    <select class="form-control selectpicker" data-style="btn-pink">
                                                        <option>HTML</option>
                                                        <option>CSS</option>
                                                        <option>jQuery</option>
                                                        <option>Javascript</option>
                                                    </select>
                                                    <!--===================================================-->
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                <div class="panel">
                                    <div class="panel-heading">
                                        <div class="panel-control">
                                            <button class="btn btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></button>
                                            <button class="btn btn-default" data-click="panel-reload"><i class="fa fa-refresh"></i></button>
                                            <button class="btn btn-default" data-click="panel-collapse"><i class="fa fa-chevron-down"></i></button>
                                            <button class="btn btn-default" data-dismiss="panel"><i class="fa fa-times"></i></button>
                                        </div>
                                        <h3 class="panel-title">Range Slider component</h3>
                                    </div>
                                    <div class="panel-body">
                                        <h4 class="text-thin">Horizontal</h4>
                                        <div class="row">
                                            <div class="col-xs-6">
                                                <p class="text-thin mar-btm">Default</p>
                                                <!--Default Range Slider-->
                                                <!--===================================================-->
                                                <div id="demo-range-def"></div>
                                                <!--===================================================-->
                                                <br>
                                                <div> <strong>Value : </strong> <span id="demo-range-def-val"></span> </div>
                                            </div>
                                            <div class="col-xs-6">
                                                <p class="text-thin mar-btm">Step</p>
                                                <!--Range Slider : Steps-->
                                                <!--===================================================-->
                                                <div id="demo-range-step"></div>
                                                <!--===================================================-->
                                                <br>
                                                <div> <strong>Value : </strong> <span id="demo-range-step-val"></span> </div>
                                            </div>
                                        </div>
                                        <br>
                                        <hr>
                                        <br>
                                        <h4 class="text-thin">Vertical</h4>
                                        <p class="text-thin mar-btm">Fixed Drag</p>
                                        <div class="mar-rgt box-inline">
                                            <!--Vertical Range Slider-->
                                            <!--===================================================-->
                                            <div id="demo-range-ver1" class="range-vertical"></div>
                                            <div id="demo-range-ver2" class="range-vertical"></div>
                                            <div id="demo-range-ver3" class="range-vertical"></div>
                                            <div id="demo-range-ver4" class="range-vertical"></div>
                                            <div id="demo-range-ver5" class="range-vertical"></div>
                                            <!--===================================================-->
                                        </div>
                                        <div id="demo-range-vpips" class="demo-pips range-vertical pips"></div>
                                        <br>
                                        <hr>
                                        <br>
                                        <h4 class="text-thin">Slider behaviour</h4>
                                        <div class="row">
                                            <div class="col-xs-6">
                                                <p class="text-thin mar-btm">Drag</p>
                                                <!--Range Slider : Drag -->
                                                <!--===================================================-->
                                                <div id="demo-range-drg"></div>
                                            </div>
                                            <div class="col-xs-6">
                                                <p class="text-thin mar-btm">Fixed Drag</p>
                                                <!--Range slider : Fixed Drag -->
                                                <!--===================================================-->
                                                <div id="demo-range-fxt"></div>
                                            </div>
                                            <div class="col-xs-6">
                                                <p class="text-thin mar-btm">Combinate</p>
                                                <!--Range Slider : Combinate -->
                                                <!--===================================================-->
                                                <div id="demo-range-com"></div>
                                            </div>
                                        </div>
                                        <br>
                                        <hr>
                                        <br>
                                        <h4 class="text-thin mar-btm">Pips</h4>
                                        <!--Range Slider : Pips -->
                                        <!--===================================================-->
                                        <div id="demo-range-hpips" class="demo-pips pips"></div>
                                        <!--===================================================-->
                                    </div>
                                </div>
                                <div class="panel">
                                    <div class="panel-heading">
                                        <div class="panel-control">
                                            <button class="btn btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></button>
                                            <button class="btn btn-default" data-click="panel-reload"><i class="fa fa-refresh"></i></button>
                                            <button class="btn btn-default" data-click="panel-collapse"><i class="fa fa-chevron-down"></i></button>
                                            <button class="btn btn-default" data-dismiss="panel"><i class="fa fa-times"></i></button>
                                        </div>
                                        <h3 class="panel-title">WYSIWYG Editor</h3>
                                    </div>
                                    <div class="panel-body">
                                        <!--Summernote-->
                                        <!--===================================================-->
                                        <div id="demo-summernote"></div>
                                        <!--===================================================-->
                                        <!-- End Summernote -->
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="panel">
                                    <div class="panel-heading">
                                        <div class="panel-control">
                                            <button class="btn btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></button>
                                            <button class="btn btn-default" data-click="panel-reload"><i class="fa fa-refresh"></i></button>
                                            <button class="btn btn-default" data-click="panel-collapse"><i class="fa fa-chevron-down"></i></button>
                                            <button class="btn btn-default" data-dismiss="panel"><i class="fa fa-times"></i></button>
                                        </div>
                                        <h3 class="panel-title">Validation States</h3>
                                    </div>
                                    <!--Validation States-->
                                    <!--===================================================-->
                                    <div class="panel-body">
                                        <div class="form-group">
                                            <label for="demo-vs-definput" class="control-label">Default input</label>
                                            <input type="text" id="demo-vs-definput" class="form-control">
                                        </div>
                                        <div class="form-group has-warning">
                                            <label for="demo-vs-warinput" class="control-label">Input with warning</label>
                                            <input type="text" id="demo-vs-warinput" class="form-control">
                                        </div>
                                        <div class="form-group has-error">
                                            <label for="demo-vs-errinput" class="control-label">Input with error</label>
                                            <input type="text" id="demo-vs-errinput" class="form-control">
                                        </div>
                                        <div class="form-group has-success">
                                            <label for="demo-vs-scsinput" class="control-label">Input with success</label>
                                            <input type="text" id="demo-vs-scsinput" class="form-control">
                                        </div>
                                    </div>
                                    <!--===================================================-->
                                    <!--END OF VALIDATION STATES-->
                                </div>
                                <div class="panel">
                                    <div class="panel-heading">
                                        <div class="panel-control">
                                            <button class="btn btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></button>
                                            <button class="btn btn-default" data-click="panel-reload"><i class="fa fa-refresh"></i></button>
                                            <button class="btn btn-default" data-click="panel-collapse"><i class="fa fa-chevron-down"></i></button>
                                            <button class="btn btn-default" data-dismiss="panel"><i class="fa fa-times"></i></button>
                                        </div>
                                        <h3 class="panel-title">With optional icons</h3>
                                    </div>
                                    <div class="panel-body">
                                        <!--Validation States-->
                                        <!--===================================================-->
                                        <div class="form-group has-feedback">
                                            <label for="demo-oi-definput" class="control-label">Default input</label>
                                            <input type="text" id="demo-oi-definput" class="form-control">
                                            <span class="fa fa-user fa-lg form-control-feedback"></span>
                                        </div>
                                        <div class="form-group has-success has-feedback">
                                            <label for="demo-oi-sccinput" class="control-label">Input with success</label>
                                            <input type="text" id="demo-oi-sccinput" class="form-control">
                                            <span class="fa fa-check fa-lg form-control-feedback"></span>
                                        </div>
                                        <div class="form-group has-warning has-feedback">
                                            <label for="demo-oi-warinput" class="control-label">Input with warning</label>
                                            <input type="text" id="demo-oi-warinput" class="form-control">
                                            <span class="fa fa-warning fa-lg form-control-feedback"></span>
                                        </div>
                                        <div class="form-group has-error has-feedback">
                                            <label for="demo-oi-errinput" class="control-label">Input with error</label>
                                            <input type="text" id="demo-oi-errinput" class="form-control">
                                            <span class="fa fa-times fa-lg form-control-feedback"></span>
                                        </div>
                                        <!--===================================================-->
                                        <!--End Validation States-->
                                    </div>
                                </div>
                                <div class="panel">
                                    <div class="panel-heading">
                                        <div class="panel-control">
                                            <button class="btn btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></button>
                                            <button class="btn btn-default" data-click="panel-reload"><i class="fa fa-refresh"></i></button>
                                            <button class="btn btn-default" data-click="panel-collapse"><i class="fa fa-chevron-down"></i></button>
                                            <button class="btn btn-default" data-dismiss="panel"><i class="fa fa-times"></i></button>
                                        </div>
                                        <h3 class="panel-title">Basic Input Size</h3>
                                    </div>
                                    <!--Input Size-->
                                    <!--===================================================-->
                                    <form class="form-horizontal">
                                        <div class="panel-body">
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label" for="demo-is-inputsmall">Small Input</label>
                                                <div class="col-sm-6">
                                                    <input type="text" placeholder=".input-sm" class="form-control input-sm" id="demo-is-inputsmall">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="demo-is-inputnormal" class="col-sm-3 control-label">Normal Input</label>
                                                <div class="col-sm-6">
                                                    <input type="text" placeholder="Normal" class="form-control" id="demo-is-inputnormal">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="demo-is-inputlarge" class="col-sm-3 control-label">Large Input</label>
                                                <div class="col-sm-6">
                                                    <input type="text" placeholder=".input-lg" class="form-control input-lg" id="demo-is-inputlarge">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label">Grid Inputs</label>
                                                <div class="col-sm-3">
                                                    <input type="text" placeholder=".col-sm-3" class="form-control">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-sm-5 col-sm-offset-3">
                                                    <input type="text" placeholder=".col-sm-5" class="form-control">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-sm-7 col-sm-offset-3">
                                                    <input type="text" placeholder=".col-sm-7" class="form-control">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-sm-9 col-sm-offset-3">
                                                    <input type="text" placeholder=".col-sm-9" class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                    <!--===================================================-->
                                    <!--End Input Size-->
                                </div>
                                <div class="panel">
                                    <div class="panel-heading">
                                        <div class="panel-control">
                                            <button class="btn btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></button>
                                            <button class="btn btn-default" data-click="panel-reload"><i class="fa fa-refresh"></i></button>
                                            <button class="btn btn-default" data-click="panel-collapse"><i class="fa fa-chevron-down"></i></button>
                                            <button class="btn btn-default" data-dismiss="panel"><i class="fa fa-times"></i></button>
                                        </div>
                                        <h3 class="panel-title">Icons Addons</h3>
                                    </div>
                                    <!--Icons Addons-->
                                    <!--===================================================-->
                                    <form class="form-horizontal">
                                        <div class="panel-body">
                                            <div class="input-group mar-btm">
                                                <span class="input-group-addon"><i class="fa fa-star fa-lg"></i></span>
                                                <input type="text" class="form-control" placeholder="Name">
                                            </div>
                                            <div class="input-group mar-btm">
                                                <input type="email" class="form-control" placeholder="Folder name">
                                                <span class="input-group-addon"><i class="fa fa-folder fa-lg"></i></span>
                                            </div>
                                            <div class="input-group mar-btm">
                                                <span class="input-group-addon"><i class="fa fa-dollar fa-lg"></i></span>
                                                <input type="text" class="form-control">
                                                <span class="input-group-addon">.00</span>
                                            </div>
                                        </div>
                                    </form>
                                    <!--===================================================-->
                                    <!--End Icons Addons-->
                                </div>
                                <div class="panel">
                                    <div class="panel-heading">
                                        <div class="panel-control">
                                            <button class="btn btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></button>
                                            <button class="btn btn-default" data-click="panel-reload"><i class="fa fa-refresh"></i></button>
                                            <button class="btn btn-default" data-click="panel-collapse"><i class="fa fa-chevron-down"></i></button>
                                            <button class="btn btn-default" data-dismiss="panel"><i class="fa fa-times"></i></button>
                                        </div>
                                        <h3 class="panel-title">Buttons Addons</h3>
                                    </div>
                                    <!--Buttons Addons-->
                                    <!--===================================================-->
                                    <form class="form-horizontal">
                                        <div class="panel-body">
                                            <div class="input-group mar-btm">
                                                <span class="input-group-btn">
                                                <button class="btn btn-warning" type="button">Submit</button>
                                                </span>
                                                <input type="email" placeholder="Email" class="form-control">
                                            </div>
                                            <div class="input-group mar-btm">
                                                <input type="text" placeholder="Search" class="form-control">
                                                <span class="input-group-btn">
                                                <button class="btn btn-danger btn-labeled fa fa-search" type="button">Search</button>
                                                </span>
                                            </div>
                                            <div class="input-group mar-btm">
                                                <span class="input-group-btn">
                                                <button class="btn btn-purple" type="button"><i class="fa fa-thumbs-up"></i></button>
                                                </span>
                                                <input type="text" placeholder="Comment" class="form-control">
                                                <span class="input-group-btn">
                                                <button class="btn btn-purple" type="button"><i class="fa fa-thumbs-down"></i></button>
                                                </span>
                                            </div>
                                        </div>
                                    </form>
                                    <!--===================================================-->
                                    <!--End Buttons Addon-->
                                </div>
                                <div class="panel">
                                    <div class="panel-heading">
                                        <div class="panel-control">
                                            <button class="btn btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></button>
                                            <button class="btn btn-default" data-click="panel-reload"><i class="fa fa-refresh"></i></button>
                                            <button class="btn btn-default" data-click="panel-collapse"><i class="fa fa-chevron-down"></i></button>
                                            <button class="btn btn-default" data-dismiss="panel"><i class="fa fa-times"></i></button>
                                        </div>
                                        <h3 class="panel-title">Ion Range Slider</h3>
                                    </div>
                                    <div class="panel-body">
                                        <!--Ion Range Slider-->
                                        <!--===================================================-->
                                        <form class="form-horizontal form-bordered">
                                            <div class="form-group">
                                                <label class="col-md-3 control-label">Default</label>
                                                <div class="col-md-9">
                                                    <input type="text" id="default_rangeSlider" name="default_rangeSlider" value="" />
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-md-3 control-label">Custom Range</label>
                                                <div class="col-md-9">
                                                    <input type="text" id="customRange_rangeSlider" name="default_rangeSlider" value="" />
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-md-3 control-label">Custom Values</label>
                                                <div class="col-md-9">
                                                    <input type="text" id="customValue_rangeSlider" name="default_rangeSlider" value="" />
                                                </div>
                                            </div>
                                        </form>
                                        <!--===================================================-->
                                        <!-- End Ion Range Slider -->
                                    </div>
                                </div>
                                <!--MASKED INPUT-->
                                <!--===================================================-->
                                <div class="panel">
                                    <div class="panel-heading">
                                        <div class="panel-control">
                                            <button class="btn btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></button>
                                            <button class="btn btn-default" data-click="panel-reload"><i class="fa fa-refresh"></i></button>
                                            <button class="btn btn-default" data-click="panel-collapse"><i class="fa fa-chevron-down"></i></button>
                                            <button class="btn btn-default" data-dismiss="panel"><i class="fa fa-times"></i></button>
                                        </div>
                                        <h3 class="panel-title">Masked Input</h3>
                                    </div>
                                    <div class="panel-body form-horizontal">
                                        <div class="form-group">
                                            <label for="demo-msk-date" class="col-md-4 control-label">Date</label>
                                            <div class="col-md-7">
                                                <input type="text" id="demo-msk-date" placeholder="dd/mm/yyyy" data-mask="99/99/9999" class="form-control" />
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="demo-msk-date2" class="col-md-4 control-label">Date</label>
                                            <div class="col-md-7">
                                                <input type="text" id="demo-msk-date2" placeholder="dd-mm-yyyy" data-mask="99-99-9999" class="form-control" />
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="demo-msk-phone" class="col-md-4 control-label">Phone</label>
                                            <div class="col-md-7">
                                                <input type="text" id="demo-msk-phone" placeholder="(999) 999-9999" data-mask="(999) 999-9999" class="form-control" />
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="demo-msk-pkey" class="col-md-4 control-label"> Product Key</label>
                                            <div class="col-md-7">
                                                <input type="text" id="demo-msk-pkey" class="form-control" placeholder="HSDBF-HSBFC-HGFVD-JHJUG-JKHYG" />
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="demo-msk-taxid" class="col-md-4 control-label">Tax ID</label>
                                            <div class="col-md-7">
                                                <input type="text" id="demo-msk-taxid" class="form-control" placeholder="99-9999999" />
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="demo-msk-ssn" class="col-md-4 control-label">SSN</label>
                                            <div class="col-md-7">
                                                <input type="text" id="demo-msk-ssn" class="form-control" placeholder="999-99-9999" />
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="demo-msk-currency" class="col-md-4 control-label">Currency</label>
                                            <div class="col-md-7">
                                                <input type="text" id="demo-msk-currency" placeholder="$ 999,999,999.99" data-mask="$ 999,999,999.99" class="form-control" />
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="demo-msk-ipv6" class="col-md-4 control-label">IPV6</label>
                                            <div class="col-md-7">
                                                <input type="text" id="demo-msk-ipv6" placeholder="9999:9999:9999:9:999:9999:9999:9999" data-mask="9999:9999:9999:9:999:9999:9999:9999" class="form-control" />
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="demo-msk-ipv4" class="col-md-4 control-label">IPV4</label>
                                            <div class="col-md-7">
                                                <input type="text" id="demo-msk-ipv4" placeholder="999.999.999.999" data-mask="999.999.999.999" class="form-control">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="demo-msk-isbn2" class="col-md-4 control-label">ISBN 2</label>
                                            <div class="col-md-7">
                                                <input type="text" id="demo-msk-isbn2" placeholder="999/99/999/9999/9" data-mask="999/99/999/9999/9" class="form-control">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="demo-msk-isbn1" class="col-md-4 control-label">ISBN 1</label>
                                            <div class="col-md-7">
                                                <input type="text" id="demo-msk-isbn1" placeholder="999-99-999-9999-9" data-mask="999-99-999-9999-9" class="form-control">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--===================================================-->
                                <!--END OF MASKED INPUT-->
                                <div class="panel">
                                    <div class="panel-heading">
                                        <div class="panel-control">
                                            <button class="btn btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></button>
                                            <button class="btn btn-default" data-click="panel-reload"><i class="fa fa-refresh"></i></button>
                                            <button class="btn btn-default" data-click="panel-collapse"><i class="fa fa-chevron-down"></i></button>
                                            <button class="btn btn-default" data-dismiss="panel"><i class="fa fa-times"></i></button>
                                        </div>
                                        <h3 class="panel-title">Bootstrap Timepicker</h3>
                                    </div>
                                    <div class="panel-body">
                                        <p>Easily select a time for a text input using your mouse or keyboards arrow keys.</p>
                                        <br>
                                        <p class="text-thin mar-btm">Text input</p>
                                        <!--Bootstrap Timepicker : Text Input-->
                                        <!--===================================================-->
                                        <input id="demo-tp-textinput" type="text" class="form-control">
                                        <br>
                                        <hr>
                                        <br>
                                        <p class="text-thin mar-btm">Component</p>
                                        <!--Bootstrap Timepicker : Component-->
                                        <!--===================================================-->
                                        <div class="input-group date">
                                            <input id="demo-tp-com" type="text" class="form-control">
                                            <span class="input-group-addon"><i class="fa fa-clock-o fa-lg"></i></span> 
                                        </div>
                                        <!--===================================================-->
                                    </div>
                                </div>
                                <div class="panel">
                                    <div class="panel-heading">
                                        <div class="panel-control">
                                            <button class="btn btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></button>
                                            <button class="btn btn-default" data-click="panel-reload"><i class="fa fa-refresh"></i></button>
                                            <button class="btn btn-default" data-click="panel-collapse"><i class="fa fa-chevron-down"></i></button>
                                            <button class="btn btn-default" data-dismiss="panel"><i class="fa fa-times"></i></button>
                                        </div>
                                        <h3 class="panel-title">Bootstrap Datepicker</h3>
                                    </div>
                                    <div class="panel-body">
                                        <p>Bootstrap-datepicker provides a flexible datepicker widget in the Twitter bootstrap style.</p>
                                        <br>
                                        <p class="text-thin mar-btm">Text input</p>
                                        <!--Bootstrap Datepicker : Text Input-->
                                        <!--===================================================-->
                                        <div id="demo-dp-txtinput">
                                            <input type="text" class="form-control">
                                        </div>
                                        <!--===================================================-->
                                        <br>
                                        <hr>
                                        <br>
                                        <p class="text-thin mar-btm">Component</p>
                                        <!--Bootstrap Datepicker : Component-->
                                        <!--===================================================-->
                                        <div id="demo-dp-component">
                                            <div class="input-group date">
                                                <input type="text" class="form-control">
                                                <span class="input-group-addon"><i class="fa fa-calendar fa-lg"></i></span> 
                                            </div>
                                            <small class="text-muted">Auto close on select</small> 
                                        </div>
                                        <!--===================================================-->
                                        <br>
                                        <hr>
                                        <br>
                                        <p class="text-thin mar-btm">Range</p>
                                        <!--Bootstrap Datepicker : Range-->
                                        <!--===================================================-->
                                        <div id="demo-dp-range">
                                            <div class="input-daterange input-group" id="datepicker">
                                                <input type="text" class="form-control" name="start" />
                                                <span class="input-group-addon">to</span>
                                                <input type="text" class="form-control" name="end" />
                                            </div>
                                        </div>
                                        <!--===================================================-->
                                        <br>
                                        <hr>
                                        <br>
                                        <p class="text-thin mar-btm">Inline</p>
                                        <!--Bootstrap Datepicker : Inline-->
                                        <!--===================================================-->
                                        <div id="demo-dp-inline">
                                            <div></div>
                                        </div>
                                        <!--===================================================-->
                                    </div>
                                </div>
                                <div class="panel">
                                    <div class="panel-heading">
                                        <div class="panel-control">
                                            <button class="btn btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></button>
                                            <button class="btn btn-default" data-click="panel-reload"><i class="fa fa-refresh"></i></button>
                                            <button class="btn btn-default" data-click="panel-collapse"><i class="fa fa-chevron-down"></i></button>
                                            <button class="btn btn-default" data-dismiss="panel"><i class="fa fa-times"></i></button>
                                        </div>
                                        <h3 class="panel-title">DropzoneJs</h3>
                                    </div>
                                    <div class="panel-body">
                                        <!--Dropzonejs-->
                                        <!--===================================================-->
                                        <form id="demo-dropzone" action="forms-components.html#" class="dropzone">
                                            <div class="dz-default dz-message">
                                                <div class="dz-icon icon-wrap icon-circle icon-wrap-md"> <i class="fa fa-cloud-upload fa-2x"></i> </div>
                                                <div>
                                                    <p class="dz-text">Drop files to upload</p>
                                                    <p class="text-muted">or click to pick manually</p>
                                                </div>
                                            </div>
                                            <div class="fallback">
                                                <input name="file" type="file" multiple />
                                            </div>
                                        </form>
                                        <!--===================================================-->
                                        <!-- End Dropzonejs -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                    <!--===================================================-->
                    <!--End page content-->
                </section>
                <!--===================================================-->
                <!--END CONTENT CONTAINER-->
                <!--MAIN NAVIGATION-->
                <!--===================================================-->
                <nav id="mainnav-container">
                    <div id="mainnav">
                        <!--Menu-->
                        <!--================================-->
                        <div id="mainnav-menu-wrap">
                            <div class="nano">
                                <div class="nano-content">
                                    <ul id="mainnav-menu" class="list-group">
                                        <!--Category name-->
                                        <li class="list-header">Navigation</li>
                                        <!--Menu list item-->
                                        <li>
                                            <a href="javascript:void(0)">
                                            <i class="fa fa-home"></i>
                                            <span class="menu-title">Dashboard</span>
                                            <i class="arrow"></i>
                                            </a>
                                            <!--Submenu-->
                                            <ul class="collapse">
                                                <li><a href="index.html"><i class="fa fa-caret-right"></i> Homepage V1</a></li>
                                                <li><a href="dashboard-v2.html"><i class="fa fa-caret-right"></i> Homepage V2</a></li>
                                                <li><a href="dashboard-v3.html"><i class="fa fa-caret-right"></i> Homepage V3</a></li>
                                            </ul>
                                        </li>
                                        <!--Category name-->
                                        <li class="list-header">Components</li>
                                        <!--Menu list item-->
                                        <li>
                                            <a href="forms-components.html#">
                                            <i class="fa fa-briefcase"></i>
                                            <span class="menu-title">UI Elements</span>
                                            <i class="arrow"></i>
                                            </a>
                                            <!--Submenu-->
                                            <ul class="collapse">
                                                <li><a href="ui-animation.html"><i class="fa fa-caret-right"></i> CSS3 Animation </a></li>
                                                <li><a href="ui-panel.html"><i class="fa fa-caret-right"></i> Panel </a></li>
                                                <li><a href="ui-xeditable.html"><i class="fa fa-caret-right"></i> Xeditable </a></li>
                                                <li><a href="ui-button.html"><i class="fa fa-caret-right"></i> Buttons </a></li>
                                                <li><a href="ui-fontawesome.html"><i class="fa fa-caret-right"></i> Fontawesome </a></li>
                                                <li><a href="ui-icons.html"><i class="fa fa-caret-right"></i> Icons </a></li>
                                                <li><a href="ui-components.html"><i class="fa fa-caret-right"></i> Components </a></li>
                                                <li><a href="ui-timeline.html"><i class="fa fa-caret-right"></i> Timeline </a></li>
                                                <li><a href="ui-nested-lists.html"><i class="fa fa-caret-right"></i> Nested Lists </a></li>
                                                <li><a href="ui-grids.html"><i class="fa fa-caret-right"></i> Grids </a></li>
                                                <li><a href="ui-tab.html"><i class="fa fa-caret-right"></i> Tab </a></li>
                                                <li><a href="ui-accordions.html"><i class="fa fa-caret-right"></i> Accordions </a></li>
                                                <li><a href="ui-dragdrop.html"><i class="fa fa-caret-right"></i> Draggable Panel</a></li>
                                                <li><a href="ui-typography.html"><i class="fa fa-caret-right"></i> Typography </a></li>
                                            </ul>
                                        </li>
                                        <!--Menu list item-->
                                        <li>
                                            <a href="forms-components.html#">
                                            <i class="fa fa-file"></i>
                                            <span class="menu-title">Pages</span>
                                            <i class="arrow"></i>
                                            </a>
                                            <!--Submenu-->
                                            <ul class="collapse">
                                                <li><a href="pages-faq.html"><i class="fa fa-caret-right"></i> FAQ </a></li>
                                                <li><a href="pages-gallery.html"><i class="fa fa-caret-right"></i> Gallery </a></li>
                                                <li><a href="pages-directory.html"><i class="fa fa-caret-right"></i> Directory </a></li>
                                                <li><a href="pages-profile.html"><i class="fa fa-caret-right"></i> User Profile </a></li>
                                                <li><a href="pages-invoice.html"><i class="fa fa-caret-right"></i> Invoice </a></li>
                                                <li><a href="pages-login.html"><i class="fa fa-caret-right"></i> Login </a></li>
                                                <li><a href="pages-register.html"><i class="fa fa-caret-right"></i> Register </a></li>
                                                <li><a href="pages-password-reminder.html"><i class="fa fa-caret-right"></i> Password Reminder </a></li>
                                                <li><a href="pages-lock-screen.html"><i class="fa fa-caret-right"></i> Lock Screen </a></li>
                                                <li><a href="pages-404.html"><i class="fa fa-caret-right"></i> 404 Error </a></li>
                                                <li><a href="pages-500.html"><i class="fa fa-caret-right"></i> 500 Error </a></li>
                                            </ul>
                                        </li>
                                        <!--Menu list item-->
                                        <li>
                                            <a href="forms-components.html#">
                                            <i class="fa fa-table"></i>
                                            <span class="menu-title">Tables</span>
                                            <i class="arrow"></i>
                                            </a>
                                            <!--Submenu-->
                                            <ul class="collapse">
                                                <li><a href="table-static.html"><i class="fa fa-caret-right"></i> Static Table <span class="label label-info pull-right">New</span></a></li>
                                                <li><a href="table-datatable.html"><i class="fa fa-caret-right"></i> Datatable Table </a></li>
                                                <li><a href="table-footable.html"><i class="fa fa-caret-right"></i> Footable Table </a></li>
                                            </ul>
                                        </li>
                                        <!--Menu list item-->
                                        <li>
                                            <a href="forms-components.html#">
                                            <i class="fa fa-edit"></i>
                                            <span class="menu-title">Forms</span>
                                            <i class="arrow"></i>
                                            </a>
                                            <!--Submenu-->
                                            <ul class="collapse">
                                                <li><a href="forms-layout.html"><i class="fa fa-caret-right"></i> Form Layout </a></li>
                                                <li><a href="forms-switchery.html"><i class="fa fa-caret-right"></i> Form Switchery </a></li>
                                                <li><a href="forms-components.html"><i class="fa fa-caret-right"></i> Form Components </a></li>
                                                <li><a href="forms-validation.html"><i class="fa fa-caret-right"></i> Form Validation </a></li>
                                                <li><a href="forms-wizard.html"><i class="fa fa-caret-right"></i> Form Wizard </a></li>
                                            </ul>
                                        </li>
                                        <!--Menu list item-->
                                        <li>
                                            <a href="forms-components.html#">
                                            <i class="fa fa-line-chart"></i>
                                            <span class="menu-title">Charts</span>
                                            <i class="arrow"></i>
                                            </a>
                                            <!--Submenu-->
                                            <ul class="collapse">
                                                <li><a href="charts-flot.html"><i class="fa fa-caret-right"></i> Flot Chart </a></li>
                                                <li><a href="charts-morris.html"><i class="fa fa-caret-right"></i> Morris Chart </a></li>
                                            </ul>
                                        </li>
                                        <li class="list-divider"></li>
                                        <!--Category name-->
                                        <li class="list-header">Extra</li>
                                        <!--Menu list item-->
                                        <li>
                                            <a href="calendar.html">
                                            <i class="fa fa-calendar"></i>
                                            <span class="menu-title">
                                            Calendar
                                            </span>
                                            </a>
                                        </li>
                                        <!--Menu list item-->
                                        <li>
                                            <a href="ui-widgets.html">
                                            <i class="fa fa-flask"></i>
                                            <span class="menu-title">
                                               Widgets
                                            <span class="label label-pink pull-right">New</span>
                                            </span>
                                            </a>
                                        </li>
                                        <!--Menu list item-->
                                        <li>
                                            <a href="forms-components.html#">
                                            <i class="fa fa-envelope-o"></i>
                                            <span class="menu-title">Mail</span>
                                            <i class="arrow"></i>
                                            </a>
                                            <!--Submenu-->
                                            <ul class="collapse">
                                                <li><a href="mail-inbox.html"><i class="fa fa-caret-right"></i> Inbox </a></li>
                                                <li><a href="mail-compose.html"><i class="fa fa-caret-right"></i> Compose </a></li>
                                                <li><a href="mail-mailview.html"><i class="fa fa-caret-right"></i> Mail View </a></li>
                                            </ul>
                                        </li>
                                        <!--Menu list item-->
                                        <li>
                                            <a href="forms-components.html#">
                                            <i class="fa fa-map-marker"></i>
                                            <span class="menu-title">
                                            Maps
                                            <span class="label label-mint pull-right">New</span>
                                            </span>
                                            </a>
                                            <!--Submenu-->
                                            <ul class="collapse">
                                                <li><a href="maps-gmap.html">Google Maps</a></li>
                                                <li><a href="maps-vectormap.html">Vector Maps</a></li>
                                            </ul>
                                        </li>
                                        <!--Menu list item-->
                                        <li>
                                            <a href="forms-components.html#">
                                            <i class="fa fa-plus-square"></i>
                                            <span class="menu-title">Menu Level</span>
                                            <i class="arrow"></i>
                                            </a>
                                            <!--Submenu-->
                                            <ul class="collapse">
                                                <li><a href="forms-components.html#"><i class="fa fa-caret-right"></i> Second Level Item</a></li>
                                                <li><a href="forms-components.html#"><i class="fa fa-caret-right"></i> Second Level Item</a></li>
                                                <li><a href="forms-components.html#"><i class="fa fa-caret-right"></i> Second Level Item</a></li>
                                                <li class="list-divider"></li>
                                                <li>
                                                    <a href="forms-components.html#">Third Level<i class="arrow"></i></a>
                                                    <!--Submenu-->
                                                    <ul class="collapse">
                                                        <li><a href="forms-components.html#"><i class="fa fa-caret-right"></i> Third Level Item</a></li>
                                                        <li><a href="forms-components.html#"><i class="fa fa-caret-right"></i> Third Level Item</a></li>
                                                        <li><a href="forms-components.html#"><i class="fa fa-caret-right"></i> Third Level Item</a></li>
                                                        <li><a href="forms-components.html#"><i class="fa fa-caret-right"></i> Third Level Item</a></li>
                                                    </ul>
                                                </li>
                                                <li>
                                                    <a href="forms-components.html#">Third Level<i class="arrow"></i></a>
                                                    <!--Submenu-->
                                                    <ul class="collapse">
                                                        <li><a href="forms-components.html#"><i class="fa fa-caret-right"></i> Third Level Item</a></li>
                                                        <li><a href="forms-components.html#"><i class="fa fa-caret-right"></i> Third Level Item</a></li>
                                                        <li><a href="forms-components.html#"><i class="fa fa-caret-right"></i> Third Level Item</a></li>
                                                        <li class="list-divider"></li>
                                                        <li><a href="forms-components.html#"><i class="fa fa-caret-right"></i> Third Level Item</a></li>
                                                        <li><a href="forms-components.html#"><i class="fa fa-caret-right"></i> Third Level Item</a></li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                    <!--Widget-->
                                    <!--================================-->
                                    <div class="mainnav-widget">
                                        <!-- Show the button on collapsed navigation -->
                                        <div class="show-small">
                                            <a href="forms-components.html#" data-toggle="menu-widget" data-target="#demo-wg-server">
                                            <i class="fa fa-desktop"></i>
                                            </a>
                                        </div>
                                        <!-- Hide the content on collapsed navigation -->
                                        <div id="demo-wg-server" class="hide-small mainnav-widget-content">
                                            <ul class="list-group">
                                                <li class="list-header pad-no pad-ver">Server Status</li>
                                                <li class="mar-btm">
                                                    <span class="label label-primary pull-right">15%</span>
                                                    <p>CPU Usage</p>
                                                    <div class="progress progress-sm">
                                                        <div class="progress-bar progress-bar-primary" style="width: 15%;">
                                                            <span class="sr-only">15%</span>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="mar-btm">
                                                    <span class="label label-purple pull-right">75%</span>
                                                    <p>Bandwidth</p>
                                                    <div class="progress progress-sm">
                                                        <div class="progress-bar progress-bar-purple" style="width: 75%;">
                                                            <span class="sr-only">75%</span>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <!--================================-->
                                    <!--End widget-->
                                </div>
                            </div>
                        </div>
                        <!--================================-->
                        <!--End menu-->
                    </div>
                </nav>
                <!--===================================================-->
                <!--END MAIN NAVIGATION-->
                <!--ASIDE--> 
                <!--===================================================-->
                <aside id="aside-container">
                    <div id="aside">
                        <div class="nano closed">
                            <div class="nano-content">
                                <div class="fade in active">
                                    <h4 class="pad-hor text-thin"> Online Members (7) </h4>
                                    <ul class="list-group bg-trans">
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av1.png" alt="" class="img-sm"> <i class="on bottom text-light"></i> </div>
                                                <div class="inline-block">
                                                    <div class="text-small">John Knight</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av2.png" alt="" class="img-sm"> <i class="on bottom text-light"></i> </div>
                                                <div class="inline-block pad-ver-5">
                                                    <div class="text-small">Jose Knight</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av3.png" alt="" class="img-sm"> <i class="on bottom text-light"></i> </div>
                                                <div class="inline-block">
                                                    <div class="text-small">Roy Banks</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av7.png" alt="" class="img-sm"> <i class="on bottom text-light"></i> </div>
                                                <div class="inline-block">
                                                    <div class="text-small">Steven Jordan</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av4.png" alt="" class="img-sm"> <i class="on bottom text-light"></i> </div>
                                                <div class="inline-block">
                                                    <div class="text-small">Scott Owens</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av5.png" alt="" class="img-sm"> <i class="on bottom text-light"></i> </div>
                                                <div class="inline-block">
                                                    <div class="text-small">Melissa Hunt</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av1.png" alt="" class="img-sm"> <i class="busy bottom text-light"></i> </div>
                                                <div class="inline-block">
                                                    <div class="text-small">John Knight</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av2.png" alt="" class="img-sm"> <i class="busy bottom text-light"></i> </div>
                                                <div class="inline-block">
                                                    <div class="text-small">Jose Knight</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av3.png" alt="" class="img-sm"> <i class="busy bottom text-light"></i> </div>
                                                <div class="inline-block">
                                                    <div class="text-small">Roy Banks</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av7.png" alt="" class="img-sm"> <i class="busy bottom text-light"></i> </div>
                                                <div class="inline-block">
                                                    <div class="text-small">Steven Jordan</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av1.png" alt="" class="img-sm"> <i class="off bottom text-light"></i> </div>
                                                <div class="inline-block pad-ver-5">
                                                    <div class="text-small">John Knight</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av2.png" alt="" class="img-sm"> <i class="off bottom text-light"></i> </div>
                                                <div class="inline-block pad-ver-5">
                                                    <div class="text-small">Jose Knight</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av3.png" alt="" class="img-sm"> <i class="off bottom text-light"></i> </div>
                                                <div class="inline-block pad-ver-5">
                                                    <div class="text-small">Roy Banks</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                        <li class="list-group-item">
                                            <a href="javascript:void(0)" class="conversation-toggle">
                                                <div class="pull-left avatar mar-rgt"> <img src="img/av7.png" alt="" class="img-sm"> <i class="off bottom text-light"></i> </div>
                                                <div class="inline-block">
                                                    <div class="text-small">Steven Jordan</div>
                                                    <small class="text-mute">Available</small> 
                                                </div>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </aside>
                <!--===================================================--> 
                <!--END ASIDE-->
                <!--RIGHT CHAT MESSANGER--> 
                <!--===================================================-->
                <aside class="conversation closed">
                    <div class="nano">
                        <div class="nano-content">
                            <div class="media">
                                <div class="media-left"> <a href="javascript:void(0)" class="conversation-toggle"> <i class="fa fa-angle-left"></i></a> </div>
                                <div class="media-body text-center">
                                    <h4 class="media-heading">John smith</h4>
                                    <p class="text-sm">Online</p>
                                </div>
                            </div>
                            <div class="chat-window">
                                <form class="form">
                                    <div class="floating-label">
                                        <textarea id="sidebarChatMessage" placeholder="Leave a message" rows="2" class="form-control autosize" name="sidebarChatMessage"></textarea>
                                        <label for="sidebarChatMessage"></label>
                                    </div>
                                </form>
                                <div class="msg_container_base">
                                    <div class="msg_container base_sent">
                                        <div class="col-md-9 col-xs-9">
                                            <div class="messages msg_sent">
                                                <p>that mongodb thing looks good, huh? </p>
                                                <time datetime="2009-11-13T20:00">Timothy • 51 min</time>
                                            </div>
                                        </div>
                                        <div class="col-md-3 col-xs-3 avatar"> <img src="img/av1.png" alt=""> </div>
                                    </div>
                                    <div class="msg_container">
                                        <div class="col-md-3 col-xs-3 avatar"> <img src="img/av2.png" alt=""> </div>
                                        <div class="col-md-9 col-xs-9">
                                            <div class="messages msg_receive">
                                                <p>that mongodb thing looks good, huh? </p>
                                                <time datetime="2009-11-13T20:00">Timothy • 51 min</time>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="msg_container">
                                        <div class="col-md-3 col-xs-3 avatar"> <img src="img/av2.png" alt=""> </div>
                                        <div class="col-xs-9 col-md-9">
                                            <div class="messages msg_receive">
                                                <p>that mongodb thing looks good, huh? </p>
                                                <time datetime="2009-11-13T20:00">Timothy • 51 min</time>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="msg_container base_sent">
                                        <div class="col-xs-9 col-md-9">
                                            <div class="messages msg_sent">
                                                <p>that mongodb thing looks good, huh? </p>
                                                <time datetime="2009-11-13T20:00">Timothy • 51 min</time>
                                            </div>
                                        </div>
                                        <div class="col-md-3 col-xs-3 avatar"> <img src="img/av1.png" alt=""> </div>
                                    </div>
                                    <div class="msg_container">
                                        <div class="col-md-3 col-xs-3 avatar"> <img src="img/av2.png" alt=""> </div>
                                        <div class="col-xs-9 col-md-9">
                                            <div class="messages msg_receive">
                                                <p>that mongodb thing looks good, huh?</p>
                                                <time datetime="2009-11-13T20:00">Timothy • 51 min</time>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </aside>
                <!--END RIGHT CHAT MESSANGER--> 
                <!--===================================================-->
            </div>
            <!-- FOOTER -->
            <!--===================================================-->
            <footer id="footer">
                <!-- Visible when footer positions are fixed -->
                <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                <div class="show-fixed pull-right">
                    <ul class="footer-list list-inline">
                        <li>
                            <p class="text-sm">SEO Proggres</p>
                            <div class="progress progress-sm progress-light-base">
                                <div style="width: 80%" class="progress-bar progress-bar-danger"></div>
                            </div>
                        </li>
                        <li>
                            <p class="text-sm">Online Tutorial</p>
                            <div class="progress progress-sm progress-light-base">
                                <div style="width: 80%" class="progress-bar progress-bar-primary"></div>
                            </div>
                        </li>
                        <li>
                            <button class="btn btn-sm btn-dark btn-active-success">Checkout</button>
                        </li>
                    </ul>
                </div>
                <!-- Visible when footer positions are static -->
                <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                <div class="hide-fixed pull-right pad-rgt">Currently v2.2</div>
                <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                <!-- Remove the class name "show-fixed" and "hide-fixed" to make the content always appears. -->
                <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                <p class="pad-lft">&#0169; 2015 Your Company</p>
            </footer>
            <!--===================================================-->
            <!-- END FOOTER -->
            <!-- SCROLL TOP BUTTON -->
            <!--===================================================-->
            <button id="scroll-top" class="btn"><i class="fa fa-chevron-up"></i></button>
            <!--===================================================-->
        </div>
        <!--===================================================-->
        <!-- END OF CONTAINER -->
        <!--JAVASCRIPT-->
        <!--=================================================-->
        <!--jQuery [ REQUIRED ]-->
        <script src="js/jquery-2.1.1.min.js"></script>
        <!--jQuery UI [ REQUIRED ]-->
        <script src="js/jquery-ui.min.js"></script>
        <!--BootstrapJS [ RECOMMENDED ]-->
        <script src="js/bootstrap.min.js"></script>
        <!--Fast Click [ OPTIONAL ]-->
        <script src="plugins/fast-click/fastclick.min.js"></script>
        <!--Jasmine Admin [ RECOMMENDED ]-->
        <script src="js/scripts.js"></script>
        <!--Jquery Nano Scroller js [ REQUIRED ]-->
        <script src="plugins/nanoscrollerjs/jquery.nanoscroller.min.js"></script>
        <!--Metismenu js [ REQUIRED ]-->
        <script src="plugins/metismenu/metismenu.min.js"></script>
        <!--Switchery [ OPTIONAL ]-->
        <script src="plugins/switchery/switchery.min.js"></script>
        <!--Bootstrap Select [ OPTIONAL ]-->
        <script src="plugins/bootstrap-select/bootstrap-select.min.js"></script>
        <!--Bootstrap Tags Input [ OPTIONAL ]-->
        <script src="plugins/bootstrap-tagsinput/bootstrap-tagsinput.min.js"></script>
        <!--Bootstrap Tags Input [ OPTIONAL ]-->
        <script src="plugins/tag-it/tag-it.min.js"></script>
        <!--Chosen [ OPTIONAL ]-->
        <script src="plugins/chosen/chosen.jquery.min.js"></script>
        <!--noUiSlider [ OPTIONAL ]-->
        <script src="plugins/noUiSlider/jquery.nouislider.all.min.js"></script>
        <!--Bootstrap Timepicker [ OPTIONAL ]-->
        <script src="plugins/bootstrap-timepicker/bootstrap-timepicker.min.js"></script>
        <!--Bootstrap Datepicker [ OPTIONAL ]-->
        <script src="plugins/bootstrap-datepicker/bootstrap-datepicker.js"></script>
        <!--Dropzone [ OPTIONAL ]-->
        <script src="plugins/dropzone/dropzone.min.js"></script>
        <!--Dropzone [ OPTIONAL ]-->
        <script src="plugins/ion-rangeslider/ion.rangeSlider.min.js"></script>
        <!--Masked Input [ OPTIONAL ]-->
        <script src="plugins/masked-input/jquery.maskedinput.min.js"></script>
        <!--Summernote [ OPTIONAL ]-->
        <script src="plugins/summernote/summernote.min.js"></script>
        <!--Fullscreen jQuery [ OPTIONAL ]-->
        <script src="plugins/screenfull/screenfull.js"></script>
        <!--Form Component [ SAMPLE ]-->
        <script src="js/demo/form-component.js"></script>




    </body>
</html>